import React from "react";

// 如果要使用6版本的路由，所有的组件都只能写函数组件了
// 还是一切皆组件，最外面还是有BrowserRouter
import { Link, Routes, Route } from "react-router-dom";

const Home = () => {
  return <div>这是首页</div>;
};
const About = () => {
  return <div>这是关于页</div>;
};

const App = () => {
  return (
    <>
      <h2>路由基础-v6</h2>
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/about">关于页</Link>
        </li>
      </ul>

      <hr />

      {/* Route的外面从Switch变成了Routes，现在的Routes必须要加 */}
      {/* 渲染组件只能使用element属性，里面要写实例化的标签 */}

      {/* 6版本的路由只能是精准匹配了 */}
      {/* 默认是排他性路由 */}
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
        {/* <Route path="/about" element={<div>123</div>}></Route>
        <Route
          path="/about"
          element={
            <Home>
              <About></About>
            </Home>
          }
        ></Route> */}
      </Routes>
    </>
  );
};

export default App;
